<div class="row">
    <div class="col-md-12">
        <textarea
            class="form-control"
            rows={{this.rows}}
            cols={{this.cols}}
            value={{this.textOutput}}
            placeholder={{@content.placeholder}}
            readonly={{if this.lockTextInput "readonly"}}
            {{on "keydown" this.onKeydown}}
            {{on "input" this.setTextInput}}
            {{on "drop" this.fileDropped}}
            {{on "dragover" this.showCopyEffect}}
            {{may-focus this false}}
        />
    </div>
</div>

<input
    type="file"
    class="oxi-file-input"
    style="display:none"
    {{on "change" this.fileSelected}}
    {{on-init this.setFileUploadElement}}
/>

<div class="row">
    <div class="col-md-5">
        {{this.filename}}
    </div>
    <div class="col-md-3">
        {{#if this.data}}
            <BsButton
                @type='default'
                class="oxi-btn-cancel btn-block btn-sm"
                @onClick={{this.resetInput}}
                @icon="glyphicon glyphicon-trash"
            >
                &nbsp;
                {{t 'component.oxifield_uploadarea.reset'}}
            </BsButton>
        {{/if}}
    </div>
    <div class="col-md-4">
        <BsButton
            @type='default'
            class="oxi-btn-optional btn-block btn-sm"
            @onClick={{this.openFileUpload}}
            disabled={{this.data}}
            @icon="glyphicon glyphicon-folder-open"
        >
            &nbsp;
            {{t 'component.oxifield_uploadarea.open'}}
        </BsButton>
    </div>
</div>
